<template>
  <div class="list-page">
    <header>
      <Row type="flex" justify="space-between">
        <Col span="20">
          <Row type="flex" justify="start">
            <div class="home-user">
              <span>
                <p style="margin-right:15px">姓名：{{bloc.memberInfo.nickname}}</p>
                <p style="margin-right:15px">身高：{{bloc.memberInfo.height}}CM</p>
                <p style="margin-right:15px">性别：{{bloc.memberInfo.sex == '0' ? '男' : '女'}}</p>
              </span>
            </div>
          </Row>
        </Col>
      </Row>
    </header>
    <Row>
      <div class="toolbar">
        <Input
          placeholder="昵称"
          v-model="bloc.form.nickname"
          style="width: 180px;margin-right: 10px"
        />
        <DatePicker
          type="daterange"
          placeholder="添加时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.joindate"
          style="width: 200px;margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询</Button>
        <Button icon="md-refresh" style="margin-right: 10px" size="default" @click="bloc.reset()">重置</Button>
      </div>
    </Row>
    <Row>
      <div>
        <Table
          border
          ref="selection"
          :loading="bloc.loading"
          :columns="columns"
          highlight-row
          :data="bloc.paged.items"
        >
          <template slot-scope="{ row }" slot="action">
<!--            <Button-->
<!--              style="margin-left: 5px; margin-right: 5px; "-->
<!--              @click="bloc.changeDetailModal(row.id)"-->
<!--              type="info"-->
<!--              v-if="Validation.check(Resources.AFFILIATE_UPDATE)"-->
<!--            >编辑</Button>-->

            <Button
              style="margin-left: 5px; margin-right: 5px; "
              type="success"
              @click="$router.push(`/family/DetailDetail/${row.memberId}`)"
              v-if="Validation.check(Resources.AFFILIATE)"
            >成员详情</Button>

<!--            <Button-->
<!--              style="margin-left: 5px; margin-right: 5px; "-->
<!--              @click="removeItem(row)"-->
<!--              type="error"-->
<!--              v-if="Validation.check(Resources.AFFILIATE_DELETE)"-->
<!--            >删除</Button>-->
          </template>
<!--          <template slot-scope="{ row, index }" slot="birthday">-->
<!--            <span>{{$moment(row.birthday).format('YYYY-MM-DD')}}</span>-->
<!--          </template>-->
          <slot name="footer" slot="footer">
            <Page
              show-elevator
              show-total
              show-sizer
              :total="bloc.paged.itemCount"
              :current="bloc.paged.pageIndex"
              :page-size="bloc.paged.pageSize"
              :page-size-opts="[15, 30, 50, 100]"
              @on-change="val=>bloc.load(val, bloc.paged.pageSize)"
              @on-page-size-change="val=>bloc.load(bloc.paged.pageIndex, val)"
            />
          </slot>
        </Table>
      </div>
    </Row>
<!--    <FormDetailModal-->
<!--      :showDetailModal="bloc.isShowDetailModal"-->
<!--      :idx="bloc.detailMemberId"-->
<!--      :memberId="bloc.memberId"-->
<!--      @closeModal="bloc.changeDetailModal(0)"-->
<!--    ></FormDetailModal>-->
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { Route } from 'vue-router';
    import { DetailBloc } from '@/view/family/DetailBloc';
    import FormDetailModal from '@/view/member/FormDetailModal.vue';
    import { Member } from '@/base/model/Member';
    import { formatDate } from '@/base/util/Dates';
    import { Affiliate } from '@/base/model/Affiliate';
    import { Validation } from '@/base/Validation';
    import { Resources } from '@/base/Resources';

    const columns = (bloc: DetailBloc) => [
        {
            title: "成员手机号",
            key: "phone",
            align: "center",
        },
        {
            title: '成员昵称',
            key: 'nickname',
            align: 'center'
        },

        {
            title: '成员类型',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.memberType === 1 ? '创建者' : ''
                    }
                });
            },
            align: 'center'
        },
        {
            title: '添加时间',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: formatDate(
                            new Date(params.row.joindate),
                            'yyyy-MM-dd hh:mm:ss'
                        )
                    }
                });
            },
            width: 180,
            align: 'center'
        },
        {
            title: '操作',
            slot: 'action',
            width: 260,
            align: 'center'
        }
    ];

    @Component({
        components: {
            FormDetailModal
        }
    })
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
              vm.bloc.familyid = vm.idx;
              vm.bloc.load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize,vm.idx)
                .catch((e) => {
                    vm.$Message.error('操作错误');
                });
            });
        }

        get idx() {
            return Number(this.$route.params.id);
        }

        // get memberId() {
        //     return Number(this.$route.params.id);
        // }

        Validation = Validation;
        Resources = Resources;
        bloc: DetailBloc = new DetailBloc();
        columns = columns(this.bloc);

        // removeItem(dataItem: Affiliate) {
        //     this.$Modal.confirm({
        //         title: '提示',
        //         content: '确认删除后将无法恢复！还要继续吗？',
        //         okText: '删除',
        //         cancelText: '取消',
        //         onOk: () => {
        //             this.bloc
        //                 .removeItem(dataItem)
        //                 .then(() => {
        //                     this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
        //                 })
        //                 .then(() => {
        //                     this.$Message.success('删除成功');
        //                 })
        //                 .catch((e) => {
        //                     this.$Message.error('删除失败');
        //                 });
        //         }
        //     });
        // }

        // handleSelectAll(status) {
        //     let el: any = this.$refs.selection;
        //     el.selectAll(status);
        // }
    }
</script>

<style lang="less" scoped>

header {
    height: 80px;
    width: 100%;
    font-size: 18px;
    padding: 25px 20px;
    border: 1px solid rgba(242, 242, 242, 1);

    .user-device-box > div {
      width: 120px;
    }

    .home-user {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 15px;
      color: #999;
      font-size: 14px;

      span {
        padding: 5px 0;
        display: flex;

      }
    }
  }
</style>
